<template>
  <PageLayout page-style="background: #f3f7f8; paddding: 16rpx;">
    <view class="tabs">
      <view class="tab-ul">
        <view class="flex tab-li" :class="{ active: nav === 1 }" @click="nav = 1">待开票 </view>
        <view class="flex tab-li" :class="{ active: nav === 2 }" @click="nav = 2">开票记录 </view>
      </view>
    </view>

    <div class="content" :key="nav">
      <div v-if="nav === 1" class="order-content" :key="nav">
        <OrderInvoice :key="+new Date()" :invoice-type="0"></OrderInvoice>
      </div>
      <div v-if="nav === 2" class="invoice-content" :key="nav">
        <OrderInvoice :key="+new Date()" :invoice-type="1"></OrderInvoice>
      </div>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '@/components/PageLayout.vue';
import OrderInvoice from '@/pages/invoice/component/OrderInvoice.vue';
import { ref } from 'vue';

const nav = ref(1);
</script>

<style lang="scss">
.tabs {
  .tab-ul {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1rpx solid #e4e4e4;
    .tab-li {
      font-size: 28rpx;
      line-height: 88rpx;
      border-bottom: 4rpx solid transparent;
      color: #6f6f6f;
      font-weight: 400;
      &.active {
        color: #222222;
        font-weight: bold;
        border-bottom: 4rpx solid #f25a27;
      }
    }
  }
}
</style>
